<template>
  <div
    class="exit"
    :style="{ backgroundImage: $gbUrl($imgCatelog.sys.btn.exit1) }"
    title="退出游戏"
    @click="handleClick"
  ></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "@/store";
import { MutationTypes as PlayerMutationTypes } from "@/store/player/mutation-types.ts";
import { MutationTypes as SysMutationTypes } from "@/store/sys/mutation-types.ts";
import router from "@/router";
import { confirm } from "@/util/confirm";

const ExitConfirm = defineComponent({
  name: "ExitConfirm",
  setup() {
    const handleClick = async () => {
      const res = await confirm("退出后您的金币将清零，是否退出游戏？");
      if (res) {
        const store = useStore();
        // 清理
        store.commit(PlayerMutationTypes.CLEAR_USER_INFO);
        store.commit(SysMutationTypes.SET_SYS_INFO, []);
        router.replace("/login");
      }
    };
    return {
      handleClick
    };
  }
});
export default ExitConfirm;
</script>
<style lang="scss" scoped>
.exit {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  overflow: hidden;
  background-position: 0 0;
  background-size: 200% 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  cursor: pointer;
  &:hover {
    background-position: -100px 0;
  }
  &:active {
    transform: scale(0.9);
  }
}
</style>
